<template>
  <div class="SignName">
      <div class="text">
        <textarea class="area" placeholder="介绍一下自己吧" v-model="signature" maxlength="30" @input="descInput">
        </textarea>
        <p>{{remnant}}/30</p>
      </div>

    <div class="next-btn">
      <mt-button type="danger" size="large" v-on:click="saveSign">确认</mt-button>
    </div>


  </div>
</template>

<script>
  import { Toast } from 'mint-ui';

  export default {
  name: 'SignName',
  data () {
    return {
      signature: '',
      remnant: 0
    }
  },
  methods: {
    descInput:function () {
      this.remnant = this.signature.length;
    },
    saveSign:function(){
      if(this.signature == ''){
        Toast('签名不能为空');
        return;
      }

      var ajaxData = {};
      ajaxData.signature = this.signature;
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.changeSignature,
        data: ajaxData,
        success:function(res){
          if(res.code == 200){

            Toast('个人签名修改成功');
            setTimeout(function(){
              _this.$router.push('/me/people');
            },100)


          }
          else{
            //Toast(res.msg)
          }
        }
      })

    },
    getSign:function(){

      var  ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.peopleDetail,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

//            _this.people = res.data;
            _this.signature = res.data.signature;
            _this.remnant = _this.signature.length;
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    }
  },
  mounted:function(){

    this.getSign();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .SignName{
    padding: 0.8rem 0.6rem;
  }
.text{position:relative;}
.text p{ text-align: right; color: #c6c6c6}
.area{
  margin-top:.5rem;
  width:100%;
  height:7rem;
  box-sizing:border-box;
  border: 1px solid #c1c1c1;
  border-radius: 0.2rem;
  padding: 0.3rem;

}


.btn2{
    background:#aaa;
    width:50%;
    height:2rem;
    text-align:center;
    margin-left:25%;

    margin-top:2rem;
    border-radius:.3rem;
}
</style>
